<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="text" id="_input">
        <button id="jump">跳</button>
        <button id="pop">放大</button>
        <button id="blink">闪光</button>
    </div>
    <h1></h1>
</body>

</html>
<style>
    body {
        display: flex;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    div{
        height: 100px;
    }
    h1{
        height: 200px;
        font-size: 6rem;
        font-family: Arial, Helvetica, sans-serif;
    }
    span{
        display: inline-block;
    }
    
    @keyframes jump {
        0%,100%{
            transform: translateY(0px);
        }
        50%{
            transform: translateY(-10px);
        }
    }
    @keyframes pop {
        0%,100%{
            transform: scale(1);
        }
        50%{
            transform: scale(1.2);
        }
    }
    @keyframes blink {
        0%,100%{
            color: inherit;
        }
        50%{
            color: yellow;
        }
    }
</style>
<script>
    let obj = {}
    let _input = document.getElementById('_input');
    let _h1 = document.querySelector('h1')
    Object.defineProperty(obj, 'value', {
        get: function () {
            console.log('get');
            return _input.value;
        },
        set: function () {
            _h1.innerHTML = _input.value.replace(/\S/g, "<span>$&</span>");
            return _input.value;
        }
    })
    obj.value = ''
    _input.addEventListener('input', (event) => {
        obj.value = _input.value;
    })
    document.querySelector('div').addEventListener('click', e => {
        let _span = document.querySelectorAll('span')
        let _name = event.target.id;
        console.log(_name);
        _span.forEach((e,i) =>{
            e.style.animation = `${_name} .4s`;
            e.style.animationDelay = `0.${ i }s`;
        })
    })
</script>